import { IconifyIcon } from '@iconify/types'
import { Icon } from '@iconify/react'
import { Button, Tooltip } from 'antd'
import './index.less'

interface IconProps {
  icon: IconifyIcon
  tip: string
  disabled?: boolean
  fontSize?: number
  checked?: boolean
  className?: string
  onClick?: () => void
}
export default function IconButton(props: IconProps) {
  const { fontSize = 25, className = '', checked = false, disabled = false } = props
  return (
    <Tooltip title={props.tip} overlayClassName="font-size-12px c-#000000!">
      <Button
        icon={<Icon icon={props.icon} fontSize={fontSize}></Icon>}
        className={`icon-btn ${className} ${disabled ? 'opacity-40' : ''}  ${
          checked ? 'bg-#e9edf2' : ''
        } `}
        onClick={() => {
          !props.disabled && props.onClick && props.onClick()
        }}
      ></Button>
    </Tooltip>
  )
}
